<template>
  <div class="personal_top">
    <div class="top_content">
      <div class="avatar_box"><img :src="user_exam_info.avatar"></div>
      <div class="info">
        <div class="name">{{user_exam_info.username}}</div>
        <div class="some">
          <div class="some_item">{{user_exam_info.status || ''}}</div>
          <div class="clear"></div>
        </div>
        <div class="contact">
          <!-- <div class="contact_item" >
            <span style='color:#cdc8c8;'>登录姓名: </span> <span style='color:#fff'>{{user_exam_info.username}}</span>
          </div> -->
          <div class="contact_item" >
            <span style='color:#cdc8c8;'>当前考试: </span>{{user_exam_info.examname}} <span @click='selectExam' class='a_href'>点击修改</span>
          </div>

          <div class="clear"></div>
        </div>
      </div>
      <div class="clear"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TopBlock',
  props:['user_exam_info'],
  data() {
    return {
      link_url_web: {},
      config: {},
    }
  },
  created() {
    console.log(this.user_exam_info)
  },
  methods: {
    // 提取字符串中的数字
    findNumByStr(str) {
      return str ? str.match(/\d+/g)[0] : ''
    },
    selectExam(){
      this.$router.push('/personalKaowuExam')
    }
  }
}
</script>

<style lang="scss" scoped>
  .a_href{cursor:pointer;color:red;font-size: 14px;}
  .personal_top {
    width: 100%; height: 153px; position: absolute; left: 0; top: 114px;z-index: 1;
    background: url("../../assets/images/personal/personal_top_bg.jpg") center 0 no-repeat;
    .top_content {
      width: 1200px; height: 100%; margin: 0 auto; padding: 0 10px 0 160px; position: relative;
      .avatar_box {
        position: absolute; left: 0; top: 30px; z-index: 1; width: 136px; height: 136px; padding: 3px; border-radius: 136px;
        background-color: #fff;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        img { width: 130px; height: 130px; border-radius: 130px; }
      }
      .info {
        float: left; padding-top: 36px; color: #fff;
        .name { font-size: 24px; margin-bottom: 9px; }
        .some {
          margin-bottom: 12px;
          .some_item {
            float: left; font-size: 16px; position: relative;
            &:not(:first-child) {
              margin-left: 20px;
              &::after {
                content: ''; position: absolute; left: -10px; top: 50%;transform: translate(0,-50%);width: 1px;
                height: 11px; background-color: #fff;
              }
            }
          }
        }
        .contact {
          .contact_item {
           font-size: 16px; margin-right: 17px; position: relative;height:30px;
            &.phone {
              &::after {
                content: ''; position: absolute; left: 0; top: 0; width: 19px; height: 19px; border-radius: 100%;
                background: #fff url("../../assets/images/personal/ico_1.png") 4px center no-repeat; background-size: 11px;
              }
            }
            &.wx {
              &::after {
                content: ''; position: absolute; left: 0; top: 0; width: 19px; height: 19px; border-radius: 100%;
                background: #fff url("../../assets/images/personal/ico_2.png") 3px center no-repeat; background-size: 14px;
              }
            }
          }
        }
      }
      .top_block {
          cursor:pointer;
        float: right; width: 121px; height: 96px; text-align: center; color: #fff; background: rgba(255,255,255,0.2);
        border-radius: 4px; font-size: 16px; margin: 28px 0 0 11px;
        .tx1 { height: 56px; line-height: 56px; font-weight: 700; }
        .tx2 {}
      }
    }
  }
</style>
